<template>
  <div :class="{'full-screen':true,animate:hiddenFull}">
    <img :class="{'full-logo':true}" :title="isFullScreen?'取消全屏':'全屏'" :src="isFullScreen?imgs.cancelFull:imgs.full" alt="full" @click="fullScreen">
  </div>
</template>
<script>
export default {
  props: ["hiddenFull",'isFullScreen','fullScreen'],
  components: {},
  name: "",
  data() {
    return {
      imgs: {
        full: require("../assets/images/works/full.png"),
        cancelFull: require("../assets/images/works/cancel-full-screen.png")
      }
    };
  },
  methods: {
    
  },

  created() {}
};
</script>
<style lang="scss" scoped>
.full-screen {
  background-color: rgba(47, 44, 44, 0.5);
  position: absolute;
  bottom: -40px;
  width: 100%;
  height: 40px;
  transition: all 1s;
  cursor: auto;
  z-index: 100;

  .full-logo {
    float: right;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-top: 5px;
    cursor: pointer;
  }
}
.full-screen.animate {
  bottom: 0px;
}
</style>